<template>
	<view class="content" v-show="goods.item_picture.length>0">
		<image class="topImg" :src="goods.item_picture"></image>
		<view class="title">
			<view class="name"><text class="jdlogo">唯品会</text>{{goods.item_title}}</view>
			<view class="couponPrice"v-if="goods.coupon_price != null  && goods.coupon_price != 0" >优惠券｜{{goods.coupon_price == null ?0:goods.coupon_price}}元</view>
			<view class="price"><text class="prictDesc"></text>券后 &yen;{{goods.item_final_price}}</view>
			<!-- <view class="volume">月销:{{goods.item_volume}}</view> -->
		</view>
		<view class="note">
			{{goods.seller_name}}
		</view>
		<view class="lineDetial">- 详情 -</view>
		<view class="list">
			<view class="item" v-for="(item, index) in goods.item_small_pictures" :key="index">
				<image mode="widthFix" class="detailImg response" :src="item"></image>
			</view>
		</view>
		<view class="notDetail" v-if="goods.item_small_pictures.length == 0">暂无详情...</view>
		
		<view class="exchangeBtn" @click="toGet">领 券 购 买</view>
		
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				goods:{
					 id:'',
					 item_picture:'',//商品主图
					 item_small_pictures:[],//商品小图 [string]详情
					 item_title:'',//商品标题
					 seller_name:'',//商家名字
					 item_url:'',//链接
					 item_final_price: 0,//券后价
					 coupon_price:'',//优惠券面额
					 item_volume:'',
					 coupon_price:''//优惠券面额
				}
			}
		},methods:{
			toGet(){
				let opts = {
					url: 'jdUnion/getCPSlink',
					method: 'post'
				};
				let param = {
					url:this.goods.item_url
				};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					
					if(rData == null){
						uni.showToast({
							icon:'none',
						    title: '领券排队,请稍后再试哦',
						    duration: 2000
						});
						return;
					}
					
					uni.navigateToMiniProgram({
					  appId: 'wxe9714e742209d35f',
					  path: rData.wx_path,
					  extraData: {
					  },
					  success(res) {
					  },fail() {
					  	uni.showToast({
							icon:'none',
					  	    title: '您已取消领券',
					  	    duration: 2000
					  	});
					  }
					})
				}, error => {})
			},
			getInitData(id){
				let opts = {
					url: 'wphUnion/getDetail/'+id,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					rData.coupon_price = parseFloat(rData.coupon_price);
					rData.item_final_price = parseFloat(rData.item_final_price);
					rData.item_price = parseFloat(rData.item_price);
					this.goods = rData;
					this.goods.detailList = [];
					if(rData.item_small_pictures.length>0){
						let picStr = rData.item_small_pictures.toString();
						this.goods.detailList = picStr.split(',');
					}
				}, error => {})
			}
		},onLoad(options) {
			this.goods.id = options.id;
			this.getInitData(this.goods.id);
		},onShow() {
		}
	}
	
</script>

<style>
	image{
		display: block;
	}
	.list{
		margin-bottom: 50rpx !important;
	}
	.topImg{
		width: 750rpx;
		height: 750rpx;
	}
	
	.exchangeBtn{
		position: fixed;
		bottom: 0;
		background-color: #F0AD4E;
		color: #fff;
		font-weight: 800;
		font-size: 35rpx;
		width: 100%;
		height: 50rpx;
		text-align: center;
		padding: 20rpx;
	}
	.title{
		margin: 20rpx;
		position: relative;
		background-color: #fff;
		padding: 15rpx;
		color: #333;
		border-radius: 15rpx;
	}
	.title .price{
		font-size: 36rpx;
		color: #EA552D;
		margin-top: 15rpx;
		text-align: left;
		font-weight: 800;
	}
	.prictDesc{
		font-size: 30rpx !important;
	}
	.title .name{
		font-size: 32rpx;
	}
	.lineDetial{
		text-align: center;
		margin: 30rpx;
		color: #555555;
	}
	.exchangeBtn{
		position: fixed;
		bottom: 0;
		background-color: #F0AD4E;
		color: #fff;
		font-weight: 800;
		font-size: 35rpx;
		width: 100%;
		height: 50rpx;
		text-align: center;
		padding: 20rpx;
	}

	.return{
		position: fixed;
		top: 100rpx;
		left: 30rpx;
		width: 70rpx;
		height: 70rpx;
		
	}
	.notDetail{
		text-align: center;
		font-size: 28rpx;
	}
	.note{
		background-color: #fff;
		padding: 20rpx;
		margin: 10rpx 0;
		font-size: 30rpx;
		color: #F0AD4E;
	}
	.couponPrice{
		display: inline-block;
		color: #fff;
		padding: 3rpx 10rpx;
		font-size: 26rpx;
		background-color: #ED1941;
		border-radius: 10rpx;
	}
	.volume{
		position: absolute;
		right: 15rpx;
		color: #555;
		font-size: 28rpx;
		bottom: 15rpx;
	}
	
</style>
